<script>
	export default {
		data() {
			return {
				dialogCom: false,
				submitErrorStr: '',
				tipTxt: '',
				img1:'../../static/newImg/warn.png',
				pageId: null,
				detailId: null,
				detailName: null,
				mobile: '',
				qrCode: '',
				time: '',
				partTime: {},
				partList: [],
				timeList: [],
				submitFlag: false,
				userInfo: {},
				txtShow: '',
			}
		},
		onShow() {
			this.txtShow = '<span>手机打开垃圾是考虑到按时间看到了吉安市</span>'
		},
		onLoad(obj) {
			this.pageId = obj.pageId;
			this.detailId = obj.detailId;
			if( obj.pageId == 1 ){
				uni.setNavigationBarTitle({
					title: '预约取号'
				});
			}else{
				uni.setNavigationBarTitle({
					title: '实时取号'
				});
			}
			this.detailName = obj.detailName;
			this.getLocationc(obj.pageId);
			this.userInfo = uni.getStorageSync("userInfo");
			this.$http.get("zhdt/order-date", {
				code: obj.detailId,
				centerId: this.$centerId
			}).then(res => {
				this.timeList = res.data.data.map(i => {
					i['remain'] = (i.num - i.preNum) > 0 ? (i.num - i.preNum) : 0;
					return i
				});
			})
			
			
		},
		methods: {
			getLocationc(pageId){
				if(pageId == 1){
					this.submitFlag = true;
				}else{
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						geocode: true,
						isHighAccuracy:true,
						success:  (res)=> {
							this.$http.get("zhdt/check", {
								longitude: res.longitude,
								latitude: res.latitude,
								centerId: this.$centerId
							}).then(res => {
								// 1：可以取号，0不可取号
								this.submitFlag = res.data.data == 1;
								this.tipTxt = res.data.message;
							})
						},
					});
				}
			},
			submitOpen(){
				// this.dialogCom = true
				if(this.pageId == 1){
					if(!this.time.length || !Object.keys(this.partTime).length){
						uni.showToast({ title: "请先选择办事时间", icon: 'none' });
						return
					}
				}else if(this.pageId == 2){
					if( !this.submitFlag) return 
				}
				this.$refs.isSubmit.open()
			},
			submit() {
				if(this.pageId == 1){
					this.yuyue()
				}else{
					this.shishi()
				}
			},
			// 实时取号事件
			shishi(){
				if( !this.submitFlag) return 
				this.$http.post("zhdt/take", {
					queueNumber: this.detailId,
					qhTag: '2',
					idCard : this.userInfo.idCard,
					idEntity: this.userInfo.phone,
					phone: this.userInfo.phone,
					centerId: this.$centerId
				}).then(res => {
					if (res.data.success) {
						uni.reLaunch({ url: '/pages/home/reserveHistory?type=2', });
					}else{
						// uni.showToast({ title: res.data.message, icon: 'none' });
						this.txtShow = res.data.message
						this.dialogCom = true;
					}
				}).catch(err=>{
					uni.showToast({ title: err, icon: 'none' });
				})
			},
			// 预约取号事件
			yuyue(){
				if(!this.time.length || !Object.keys(this.partTime).length){
					uni.showToast({ title: "请先选择办事时间", icon: 'none' });
					return
				}
				this.$http.post("zhdt/order", {
					projectCode: this.detailId,
					preCallDay: this.time,
					idCard : this.userInfo.idCard,
					phone: this.userInfo.phone,
					period: this.partTime.value,
					num: this.partTime.remain,
					centerId: this.$centerId
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						uni.reLaunch({ url: '/pages/home/reserveHistory?type=1' });
					}else{
						// uni.showToast({ title: res.data.message, icon: 'none' });
						this.txtShow = res.data.message
						this.dialogCom = true
					}
				}).catch(err=>{
					uni.showToast({ title: err, icon: 'none' });
				})
			},
			changeDate(e) {
				console.log('change事件:', e);
				this.time = e;
				this.partTime = {};
				this.partList = [];
				this.$http.get("zhdt/order-time", {
					date: e,
					code: this.detailId,
					centerId: this.$centerId
				}).then(res => {
					this.partList = res.data.data.map(i => {
						i['remain'] = (i.num - i.preNum) > 0 ? (i.num - i.preNum) : 0;
						i['startTimec'] = i.beginTime;
						i['endTimec'] = i.endTime
						return i
					});
				})
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			openPopupDate(){
				this.$refs.datePopup.open()
			},
			openPopup() {
				if(this.time.length == 0){
					uni.showToast({ title: "请先选择办事日期", icon: 'none' })
				}else
				this.$refs.share.open()
			},
			closePopup() {
				this.$refs.share.close()
				this.$refs.datePopup.close()
				this.$refs.isSubmit.close()
				this.dialogCom = false
				
			},
			partTimeChange(item){
				// console.log(item, "时间段信息");
				item.value = item.startTimec.substr(0,5) + "-" + item.endTimec.substr(0,5);
				this.partTime = item;
				this.closePopup();
			},
			dateStrChange(item){
				this.time = item.nowTime;
				this.partTime = {};
				this.partList = [];
				this.$http.get("zhdt/order-time", {
					date: item.nowTime,
					code: this.detailId,
					centerId: this.$centerId
				}).then(res => {
					this.partList = res.data.data.map(i => {
						i['remain'] = (i.num - i.preNum) > 0 ? (i.num - i.preNum) : 0;
						i['startTimec'] = i.beginTime;
						i['endTimec'] = i.endTime;
						return i
					}).filter(j=> new Date() < new Date(j.nowTime.replace('-','/') + ' ' + j.endTime))
					this.$refs.datePopup.close()
				})
			},
			backPage(){
				uni.navigateBack({ delta: 1 });
			},
			ceshi(){
				this.dialogShow = true
			},
			closedialog(){
				this.dialogShow = false
			}
		}
	}
</script>

<template>
	<view class="page-index">
		<uni-popup ref="isSubmit" class="dialog-popup" type="dialog">
			<uni-popup-dialog 
				:type="'error'" 
				cancelText="取消" 
				confirmText="确认" 
				:title="pageId == 1 ? '预约' : '取号'" 
				:content="pageId == 1 ? '确认提交该预约？' : '是否现在取号？'"
				@confirm="submit"
				@close="closePopup"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<view class="part-list">
				<view @click="partTimeChange(items)" class="item" v-for="(items, index) in partList" :key="index">{{ `${items.startTimec} - ${items.endTimec}` }}（剩余：{{items.remain}}）</view>
			</view>
			<view class="popup-footer" @click="closePopup">取消</view>
		</uni-popup>
		<uni-popup ref="datePopup" type="share" safeArea backgroundColor="#fff">
			<view class="part-list">
				<view @click="dateStrChange(items)" class="item" v-for="(items, index) in timeList" :key="index">{{ items.nowTime }}（剩余：{{items.remain}}）</view>
			</view>
			<view class="popup-footer" @click="closePopup">取消</view>
		</uni-popup>
		<!-- <view class="title"> -->
			<!-- <uni-icons class="icon-back" @click="backPage()" type="back" :size="24" color="#e8feff"></uni-icons> -->
			<!-- <text>{{ pageId == 1 ? '预约' : '取号'}}</text> -->
		<!-- </view> -->
		<view class="warn" v-if="!!tipTxt">
			<image :src="img1" mode=""></image>
			<text>{{tipTxt}}</text>
		</view>
		<view class="info">
			<view class="basic-info">
				<view class="info-title">基础信息</view>
				<view class="basic-item">
					<view class="label-text">办事地点：</view>
					<view class="value-text">萧山区政务服务中心</view>
				</view>
				<view class="basic-item">
					<view class="label-text">办事事项：</view>
					<view class="value-text">{{detailName}}</view>
				</view>
				<view v-if='pageId == 1' class="basic-item">
					<view class="label-text">办事日期：</view>
					<view class="time-part" @click="openPopupDate">
						<uni-icons class="iconbb" type="calendar" :size="24" color="#e1e1e1"></uni-icons>
						<text v-if="!time">选择日期</text>
						<view v-else>{{time}}</view>
					</view>
					<!-- <uni-datetime-picker class='picker-date' type="date" :clear-icon="false" v-model="time"
						@change="changeDate" @maskClick="maskClick" /> -->
				</view>
				<view v-if='pageId == 1' class="basic-item">
					<view class="label-text">办事时段：</view>
					<view class="time-part" @click="openPopup">
						<uni-icons class="iconbb" type="bottom" :size="24" color="#e1e1e1"></uni-icons>
						<text v-if="!partTime.value">选择时间段</text>
						<view v-else>{{partTime.value}}</view>
					</view>
				</view>
			</view>
			<button :class='!submitFlag ? "noNum-background" : ""' class="submit-info" @click="submitOpen">{{ pageId == 1 ? '确认提交' : '确认取号'}}</button>
			<!-- <button :class='!submitFlag ? "noNum-background" : ""' class="submit-info" @click="ceshi">{{ pageId == 1 ? '确认提ss交' : '确认ss取号'}}</button> -->
		</view>
		<view class="dialog-component" v-if="dialogCom">
			<view class="dialog-mw">
				<view class="header">提示</view>
				<view class="content" v-html="txtShow"></view>
				<view class="footer">
					<button type="default" @click="closePopup">关闭</button>
				</view>
			</view>
			<view class="shade" @click="closePopup"></view>
		</view>
		
		<!-- <view class="tip-content" v-if="txtShow" v-html="txtShow"> </view> -->
	</view>
</template>

<style scoped lang="scss">
	.page-index {
		
		.dialog-component{
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			.dialog-mw{
				$footerHeight: 80rpx; //声明变量
				.footer{
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: $footerHeight;
					button{
						height: $footerHeight;
						border-radius: 0 0 20rpx 20rpx;
						line-height: $footerHeight;
						background-color: #FFFFFF;
						&:after{
							border: none;
							border-top: 1rpx solid rgba(0,0,0,.2);
						}
					}
				}
				.header{
					text-align: center;
					font-size: 32rpx;
				}
				.content{
					margin: 20rpx 0;
					font-size: 28rpx;
				}
				position: fixed;
				left: 50%;
				top: 50%;
				z-index: 50;
				transform: translate(-50%,-50%);
				width: 60vw;
				background-color: #fff;
				padding: 40rpx 40rpx $footerHeight;
				border-radius: 20rpx;
				box-shadow: 0 0 20rpx #d0bcbc;
			}
			.shade{
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100vh;
				z-index: 40;
				background-color: rgba(0, 0, 0, 0.35);
			}
		}
		.tip-content{
			margin: 20rpx 10rpx;
			border: 1px solid #dcdcdc;
			border-top: 3px solid #e09137;
			padding: 30rpx;
			box-sizing: border-box;
		}
		
		.popup-footer{
			text-align: center;
			line-height: 120rpx;
			border-top: 1px solid #ccc;
		}
		.part-list{
			padding: 30rpx;
			text-align: center;
			box-sizing: border-box;
			max-height: 60vh;
    		overflow-y: auto;
			.no-back{
				background-color: #dfdfdf;
				color: #9b9b9b;
			}
			.item{
				border-bottom: 1px solid #dcdcdc;
				line-height: 100rpx;
				font-size: 28rpx;
			}
			.item:nth-last-child(1){
				border: none;
			}
		}
		.info {
			margin: 20rpx 10rpx;
			border: 1px solid #dcdcdc;
			border-top: 6rpx solid #e09137;

			.info-title {
				border-bottom: 1px solid #dcdcdc;
				line-height: 36px;
				padding-left: 20px;
				position: relative;
				font-weight: 600;
				font-size: 28rpx;

				&::before {
					content: '';
					display: block;
					width: 10rpx;
					height: 46rpx;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					background-color: #e09137;
				}
			}

			.basic-info {
				.basic-item {
					display: flex;
					flex-flow: row;
					margin: 0 30rpx;
					border-bottom: 1px solid #dcdcdc;
					line-height: 100rpx;
					font-size: 32rpx;
					align-items: center;
					.value-text{
						width: 62%;
						line-height: 72rpx;
					}

					.time-part {
						width: 400rpx;
						height: 80rpx;
						border: 1px solid #dcdfe6;
						font-size: 28rpx;
						border-radius: 8rpx;
						display: flex;
						flex-flow: row;

						.iconbb {
							margin: 0 16rpx;
						}

						text {
							line-height: 80rpx;
							color: #808080;
						}
						view{
							line-height: 80rpx;
						}
					}

					.picker-date {
						line-height: 80rpx;
						width: 400rpx;
					}

					.label-text {
						font-weight: 600;
						margin: 0 10rpx;
					}
				}
			}
			.submit-info {
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #295db1;
				color: #fff;
				margin: 70rpx auto;
				z-index: 10;
			}
		}

		.title {
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			background-color: #3379b5;
			font-size: 28rpx;
			color: #fff;
			position: relative;
			.icon-back{
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
</style>
